<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="@{include} :: header"></head>

<style>
    body{
    /*rgba(4, 59, 126, 0.92);*/
        background-color:  #dddddd;
        /*color:white;*/
    }
    .container{

    }

    .title-view{
        position: relative;
        left:0px;
        width:100%;
        height: 80px;
        top:0px;
        font-weight: bold;
        font-size: 40px;
        text-align: center;
    }
    .content-view{
        position: relative;
        left:0px;
        width:100%;
        height: 50%;
        top:0px;
        font-weight: bold;
        font-size: 20px;
        display: flex;
    }
    .content-left-view{
        position: relative;
        margin: 10px 30px;
        width: 60%;
        height: 100%;
        overflow: hidden;
        display: flex;
    }
    .content-left-view button{
        width: 120px;
        height: 50px;
        font-weight: bold;
        margin: 0 10px;
        color:white;
        line-height: 25px;
        font-size: 20px;
        cursor: pointer;
        background-color: #139cee;
    }
    .store-view{
        position: absolute;
        width: 74px;
        height: 230px;
        left: 88px;
        z-index: -1;
    }
    .store-view-lie{
        position: absolute;
        width: 131px;
        height: 100px;
        left: 153px;
        z-index: -1;
        background-color: #cd6928;
    }

    .store-bg-view{
        position:relative;left:0;top:0;width: 250px;height: 350px;
    }
    .store-bg-view-lie{
        position:relative;left:0;top:0;
    }
    .device-name{
        /*margin-left: 50px;*/
        font-size: 30px;
        width: 600px;
        text-align: center;
    }

    .content-right-view{
        width: 75%;
        height: 100%;
        line-height: 70px;
        font-size: 24px;
        display: flex;
    }

    .content-bottom-view{
        position: fixed;
        bottom: 20px;
        left: 0px;
        width: 100%;
        height: 75px;
        /*text-align: center;*/
    }
    .content-bottom-view button{
        width: 150px;
        height: 70px;
        font-weight: bold;
        margin: 0 10px;
        color:white;
        line-height: 25px;
        font-size: 16px;
        cursor: pointer;
        background-color: #139cee;
    }
    .layui-table, .layui-table-view{
        margin: 0;
    }
    .layui-table-page {
        height: 55px;
    }
    .back-btn{
        position: absolute;
        top: 30px;
        left:20px;
    }
    .store-height-view{
        position: absolute;
        right:75px;
        top: 73px;
        width:10px;
        height:233px;
        border: 2px solid black;
        overflow: hidden;
    }
    .store-height-num{
        position: absolute;
        left:0px;
        top: 40px;
        width:100%;
        height:30px;
        font-size: 14px;
        color:blue;
        text-align: center;
    }
    .store-height-num-lie{
        position: absolute;
        left:0px;
        top: 40px;
        width:450px;
        height:30px;
        font-size: 14px;
        color:blue;
        text-align: center;
    }
    .store-height-color{
        position: absolute;
        left:0px;
        top: 0px;
        width:100%;
        height:100%;
        background-color: green;
    }
    .store-height-view-lie{
        position: absolute;
        left:300px;
        top: 70px;
        width:10px;
        height:100px;
        border: 2px solid black;
        overflow: hidden;
    }
</style>

<body>

<div class="container">
    <input id="device" name="device" th:if="${rangeCount > 0}" th:value="${deviceStr}" type="hidden" />
    <input id="deviceId" name="deviceId" th:if="${rangeCount > 0}" th:value="${device.id}" type="hidden" />
    <input id="deviceNum" name="deviceNum" th:if="${device !=undefined}" th:value="${device.deviceNum}" type="hidden" />
    <input id="deviceType" name="deviceType" th:value="${deviceType}" type="hidden" />
    <input id="deviceHeight" name="deviceHeight" th:value="${deviceHeight}" type="hidden" />
    <input id="lastHeight" name="lastHeight" th:value="${lastHeight}" type="hidden" />
    <input id="heightRate" name="heightRate" th:if="${rangeCount > 0}" th:value="${heightRate}" type="hidden" />
    <div class="title-view">
        <div class="back-btn">
            <button class="layui-btn layui-btn-sm data-add-btn" onclick="goBack()">
                <i class="fa fa-reply" aria-hidden="true"></i>&nbsp;返回
            </button>
        </div>
        <div>
            <label>琤一云物料测量系统</label>
        </div>
<!--        <div><label th:text="${shop.shopName}"></label></div>-->
    </div>
    <div class="device-name" th:if="${rangeCount > 0}" >
        <div><label id="lbDeviceName" th:text="${device.deviceName + ' ' + device.deviceNum}"></label></div>
    </div>
    <div class="content-view" th:if="${rangeCount > 0}">
<!--        th:if="${device.isLie == 0}"-->
        <div class="content-left-view" >
            <div id="divLie0" th:classappend="${device.isLie eq 0}  ? '' : 'layui-hide'"  style="display: flex;width: 100%;">
                <div style="width: 280px;" >
                    <div style="position:relative;">
                        <img th:src="@{/img/store/store_bg.png}" class="store-bg-view"/>
                        <div class="store-height-num">当前高度：<label id="lbStoreHeight" th:text="${deviceHeight}"></label>米</div>
                        <div class="store-height-view">
                            <div class="store-height-color" th:if="${deviceType == 0}" id="divHeightColor"
                                 th:style="${'top:'+(((1 - heightRate) * 233)) +'px;'}"></div>
                            <div class="store-height-color" th:if="${deviceType == 1}" id="divHeightColor"
                                 th:style="${'top:'+(((1 - heightRate) * 233)) +'px;'}"></div>
                        </div>
                    </div>
                    <div class="store-view" th:if="${deviceType == 0}" id="store-view"
                         th:style="${'top:'+(75 + ((1 - heightRate) * 233)) +'px;'}">
                        <img th:src="@{/img/store/store-top-bg.png}" style="width: 100%;height: 100%;" />
                    </div>

                    <div class="store-view" th:if="${deviceType == 1}" id="store-view"
                         th:style="${'background-color: #cd6928;top:'+(75 + ((1 - heightRate) * 233)) +'px;'}">
<!--                        <img th:src="@{/img/store/store-top-bg.png}" style="width: 100%;height: 100%;" />-->
                    </div>
                </div>
                <div style="width: 250px;line-height: 40px;text-align: center;">
                    <div>
                        <label id="lbStoreCylinderHeight" th:text="${'仓高:' + '  ' + device.cylinderHeight + 'm'}"></label>
                    </div>
<!--                    <div>-->
<!--&lt;!&ndash;                        <label id="lbVolume" th:text="${'剩余体积:' + '  ' + device.lastVolumeNew + 'm³'}"></label>&ndash;&gt;-->
<!--                        <label id="lbVolume" th:if="${device.storeState == 1}" th:text="${'剩余体积: ' + '  ' + device.lastVolumeNew + 'm³'}"></label>-->

<!--                        <label id="lbVolume" th:if="${device.storeState == 0 && device.isShowEmpty == 1}" th:text="${'剩余体积: 当前已空仓'}"></label>-->
<!--                        <label id="lbVolume" th:if="${device.storeState == 0 && device.isShowEmpty == 0}" th:text="${'剩余体积: ' + '  ' + device.lastVolumeNew + 'm³'}"></label>-->

<!--                        <label id="lbVolume" th:if="${device.storeState == 2 && device.isShowFull == 1}" th:text="${'剩余体积: 当前已满仓'}"></label>-->
<!--                        <label id="lbVolume" th:if="${device.storeState == 2 && device.isShowFull == 0}" th:text="${'剩余体积: ' + '  ' + device.lastVolumeNew + 'm³'}"></label>-->

<!--                    </div>-->
                    <div>
                        <label id="lbWeight" th:if="${device.storeState == 1}" th:text="${'剩余吨数:' + '  ' + (device.totalWeight) +  ' ' + '吨'}"></label>
                        <label id="lbWeight" th:if="${device.storeState == 0 && device.isShowEmpty == 1}"  th:text="${'剩余吨数:' + '  ' + '当前已空仓'}"></label>
                        <label id="lbWeight" th:if="${device.storeState == 0 && device.isShowEmpty == 0}"  th:text="${'剩余吨数:' + '  ' + (device.totalWeight) +  ' ' + '吨'}"></label>

                        <label id="lbWeight" th:if="${device.storeState == 2 && device.isShowFull == 1}"  th:text="${'剩余吨数:' + '  ' + '当前已满仓'}"></label>
                        <label id="lbWeight" th:if="${device.storeState == 2 && device.isShowFull == 0}"  th:text="${'剩余吨数:' + '  ' + (device.totalWeight) +  ' ' + '吨'}"></label>
                    </div>
                    <div th:if="${deviceType == 0}">
                        <label id="lbTemperature" th:text="${'当前温度:'  + '  ' + device.temperature +  ' ' + '℃'}"></label>
                    </div>
<!--                    <div th:if="${parseFloat(device.humidity) > 0}">-->
<!--                        <label id="lbWeed" th:text="${'当前湿度:'  + '  ' + device.humidity + ' ' + '%'}"></label>-->
<!--                    </div>-->
                    <div style="margin-left: 40px;display: flex;margin-top: 50px;" >
                        <button onclick="startMeasure()">盘点</button>
                    </div>
                </div>
            </div>
            <div id="divLie1" th:classappend="${device.isLie eq 1}  ? '' : 'layui-hide'"  style="width: 100%;" >
                <div style="position: relative;width: 100%;overflow: hidden;" >
                    <div style="position:relative;overflow: hidden;">
                        <img th:src="@{/img/store/store_bg_lie.png}" class="store-bg-view-lie" style="width: 450px ;height: 280px;"/>
<!--                        <div class="store-bg-view-lie" style="width: 450px ;height: 280px;background-color: #5f8dd3;"></div>-->
                        <div class="store-height-num-lie" style="color:white;">当前高度：<label id="lbStoreHeight" th:text="${deviceHeight}"></label>米</div>
                        <div class="store-height-view-lie">
                            <div class="store-height-color" th:if="${deviceType == 0}" id="divHeightColor" th:style="${'top:'+(((1 - heightRate) * 100)) +'px;'}"></div>
                            <div class="store-height-color" th:if="${deviceType == 1}" id="divHeightColor" th:style="${'top:'+(((1 - heightRate) * 100)) +'px;'}"></div>
                        </div>
                    </div>
<!--                    <div class="store-view-lie" id="store-view-lie" th:style="${'top:' + (72 + ((1 - heightRate) * 100)) +'px;'}">-->
<!--                        <img th:src="@{/img/store/store-top-bg.png}" style="width: 100%;height: 100%;" />-->
<!--                    </div>-->

                    <div class="store-view-lie" th:if="${deviceType == 0}" id="store-view"
                         th:style="${'top:'+(72 + ((1 - heightRate) * 200)) +'px;'}">
                        <img th:src="@{/img/store/store-top-bg.png}" style="width: 100%;height: 100%;" />
                    </div>

                    <div class="store-view-lie" th:if="${deviceType == 1}" id="store-view"
                         th:style="${'background-color: #cd6928;top:'+(72 + ((1 - heightRate) * 100)) +'px;'}">
                        <!--                        <img th:src="@{/img/store/store-top-bg.png}" style="width: 100%;height: 100%;" />-->
                    </div>

                </div>
                <div style="width: 85%;line-height: 40px;text-align: center;">
                    <div>
<!--                        <label id="lbVolume" th:if="${device.storeState == 1}" th:text="${'剩余体积: ' + '  ' + device.lastVolumeNew + 'm³'}"></label>-->
<!--                        <label id="lbVolume" th:if="${device.storeState == 0}" th:text="${'剩余体积: 当前已空仓'}"></label>-->
<!--                        <label id="lbVolume" th:if="${device.storeState == 2}" th:text="${'剩余体积: 当前已满仓'}"></label>-->

<!--                        <label id="lbVolume" th:if="${device.storeState == 1}" th:text="${'剩余体积: ' + '  ' + device.lastVolumeNew + 'm³'}"></label>-->

<!--                        <label id="lbVolume" th:if="${device.storeState == 0 && device.isShowEmpty == 1}" th:text="${'剩余体积: 当前已空仓'}"></label>-->
<!--                        <label id="lbVolume" th:if="${device.storeState == 0 && device.isShowEmpty == 0}" th:text="${'剩余体积: ' + '  ' + device.lastVolumeNew + 'm³'}"></label>-->

<!--                        <label id="lbVolume" th:if="${device.storeState == 2 && device.isShowFull == 1}" th:text="${'剩余体积: 当前已满仓'}"></label>-->
<!--                        <label id="lbVolume" th:if="${device.storeState == 2 && device.isShowFull == 0}" th:text="${'剩余体积: ' + '  ' + device.lastVolumeNew + 'm³'}"></label>-->


                        <!--                    </div>-->
<!--                    <div>-->
<!--                        <label id="lbWeight" th:if="${device.storeState == 1}" th:text="${'剩余吨数:' + '  ' + (device.totalWeight) +  ' ' + '吨'}"></label>-->
<!--                        <label id="lbWeight" th:if="${device.storeState == 0}" th:text="${'剩余吨数:' + '  ' + '当前已空仓'}"></label>-->
<!--                        <label id="lbWeight" th:if="${device.storeState == 2}" th:text="${'剩余吨数:' + '  ' + '当前已满仓'}"></label>-->

                        <label id="lbWeight" th:if="${device.storeState == 1}" th:text="${'剩余吨数:' + '  ' + (device.totalWeight) +  ' ' + '吨'}"></label>
                        <label id="lbWeight" th:if="${device.storeState == 0 && device.isShowEmpty == 1}"  th:text="${'剩余吨数:' + '  ' + '当前已空仓'}"></label>
                        <label id="lbWeight" th:if="${device.storeState == 0 && device.isShowEmpty == 0}"  th:text="${'剩余吨数:' + '  ' + (device.totalWeight) +  ' ' + '吨'}"></label>

                        <label id="lbWeight" th:if="${device.storeState == 2 && device.isShowFull == 1}"  th:text="${'剩余吨数:' + '  ' + '当前已满仓'}"></label>
                        <label id="lbWeight" th:if="${device.storeState == 2 && device.isShowFull == 0}"  th:text="${'剩余吨数:' + '  ' + (device.totalWeight) +  ' ' + '吨'}"></label>

                    </div>
                    <div th:if="${deviceType == 0}">
                        <label id="lbTemperature" th:text="${'当前温度:'  + '  ' + device.temperature +  ' ' + '℃'}"></label>
<!--                    </div>-->
<!--                    <div>-->
<!--                        <div >-->
<!--                        <label th:if="${parseFloat(device.humidity) > 0}" id="lbWeed" th:text="${'当前湿度:'  + '  ' + device.humidity + ' ' + '%'}"></label>-->
                    </div>
                    <div style="">
                        <button onclick="startMeasure()">盘点</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-right-view">
            <div style="width: 100%;">
                <table class="layui-hide" id="exampleTable" lay-filter="currentTableFilter"></table>
                <script type="text/html" id="currentTableBar">
                    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="chart">数据展示</a>
                </script>
            </div>
        </div>
    </div>
    <div class="content-bottom-view">
        <th:block th:each="device : ${ranges}">
            <button th:text="${device.deviceName +' ' + device.deviceNum}" th:onclick="'handleDevice('+${device.id}+')'"></button>
        </th:block>
    </div>
</div>

<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/plugins/layui/layui.js}"></script>
<!--<div th:include="include::footer"></div>-->
<script type="text/javascript" th:src="@{/js/appjs/module/device/range/manager.js}"></script>
</body>
</html>
